<template>
  <common-card class="core-competencies">
    <template #title>核心素养</template>
    <!-- <template #operate
      ><span class="operate"
        ><label class="operate__icon"></label
        ><span class="operate__desc">导出</span></span
      ></template
    > -->
    <div class="content">
      <div
        class="chart"
        ref="chartRef"
        style="width: 448px; height: 318px"
      ></div>
      <div class="table">
        <a-table
          :showSorterTooltip="false"
          :columns="CLASS_CORE"
          :dataSource="dataList"
          :pagination="false"
          :scroll="{ y: 300 }"
        >
          <template v-slot:bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'right_rate'">
              <span
                :style="{
                  color: record.right_rate < record.grade_rate ? '#FF7B73' : ''
                }"
                >{{ getPercent(record.right_rate) }}%</span
              ></template
            >
          </template>
        </a-table>
      </div>
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { getClassCore } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getPercent } from '../utils'
import useCharts from '@/utils/echart/index'
import * as echarts from 'echarts'
import { ref, watch, onMounted, computed } from 'vue'
const chartRef = ref(null)

const noPublishAbility = ref([])

const CLASS_CORE = computed(() => {
  const columns = [
    {
      title: '素养名称',
      align: 'center',
      dataIndex: 'ability_name',
      key: 'ability_name'
    },
    {
      title: '班级正确率',
      align: 'center',
      dataIndex: 'right_rate',
      key: 'right_rate',
      sorter: (a, b) => a.right_rate - b.right_rate
    },
    {
      title: '未考查素养',
      align: 'center',
      dataIndex: 'no_publish_ability',
      key: 'no_publish_ability',
      customCell: (_, index) => {
        if (index === 0) {
          return { rowSpan: dataList.value.length }
        }
        return { rowSpan: 0 }
      },
      customRender: () => {
        return noPublishAbility.value.join('、')
      }
    }
  ]
  return columns
})

const { setOption } = useCharts(chartRef, true, true, 'light')

const getOption = () => {
  const option = {
    tooltip: {
      padding: [12, 16],
      borderRadius: 8,
      borderColor: '#fff',
      axisPointer: {
        type: 'shadow',
        label: {
          fontSize: 14,
          shadowColor: 'rgba(139, 200, 254, 0.15)'
        }
      },
      formatter: params => {
        let res = `<span style="font-weight: 700;">${params.name}</span><br>`
        dataList.value.forEach(item => {
          res += `<span style="display: flex; align-items: center; padding-top: 16px; justify-content: space-between;">
            <span style="width: fit-content; display: inline-flex; align-items: center; gap: 4px">
              <span style="display: inline-block; width: 12px; height: 12px; border-radius: 200px; background: rgba(137, 141, 255, 0.58);"></span>
            <span style="color: rgba(4, 11, 26, 0.75);">${
              item.ability_name
            }</span>
          </span>
          <span style="color: rgba(4, 11, 26, 0.5)">${getPercent(
            item.right_rate
          )}%</span>
         </span>`
        })
        return res
      }
    },
    radar: [
      {
        indicator: dataList.value.map(item => {
          return {
            text: item.ability_name
          }
        }),
        center: ['45%', '50%'],
        startAngle: 90,
        // 指示轴的分割段数
        splitNumber: 4,
        shape: 'circle',
        axisName: {
          color: '#777',
          formatter: function (value) {
            return value
              ? value.length > 6
                ? value.substring(0, 5) + '...'
                : value
              : '' // 截断超过长度的部分并添加省略号
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(24, 24, 24, 0.1)'
          }
        },
        splitArea: {
          show: false
        },
        // 坐标轴在grid区域的分割线
        splitLine: {
          lineStyle: {
            color: 'rgba(24, 24, 24, 0.1)'
          }
        },
        radius: [0, '65%']
      }
    ],

    grid: {
      containLabel: true,
      top: 10,
      bottom: 10
    },
    series: [
      {
        type: 'radar',
        emphasis: {
          lineStyle: {
            width: 4
          }
        },
        data: [
          {
            value: dataList.value.map(item => getPercent(item.right_rate)),
            name: '班级正确率',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(59, 161, 255, 1)' }, // 渐变起始颜色
                { offset: 1, color: 'rgba(24, 144, 255, 0.2)' } // 渐变结束颜色
              ])
            },
            symbol: 'none',
            lineStyle: {
              color: 'transparent' // 设置边框线为透明
            }
          }
        ]
      }
    ]
  }
  return option
}

const situationReport = useSituationReport()
const dataList = ref([])
const getData = async () => {
  const { data } = await getClassCore(situationReport.search)
  dataList.value = data?.list || []
  noPublishAbility.value = data?.no_publish_ability || []
}

watch(
  () => situationReport.search,
  async val => {
    if (val.class_id || val.grade_id || val.subject_id) {
      await getData()
      if (dataList.value && dataList.value?.length > 0) setOption(getOption())
    }
  },
  {
    deep: true
  }
)

onMounted(async () => {
  await getData()
  setOption(getOption())
})
</script>
<style lang="less" scoped>
@import '../style.less';

.core-competencies {
  .operate {
    &__icon {
      background: url('@/assets/images/situation-report/export.png') no-repeat
        center/cover;
      margin-right: 8px;
    }
  }

  .content {
    display: flex;

    .chart {
      width: fit-content;
    }

    .table {
      flex: 1;
    }
  }
}
</style>
